<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>markdown项目</title>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/1.2.7/marked.js"></script>
    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <style>
    table,
    table tr th,
    table tr td { 
        border:1px solid #0094ff;
    }

    table { 
        width: 200px;
        min-height: 25px;
        line-height: 25px;
        text-align: center;
        border-collapse: collapse;
        padding:2px;
    }

    code {
        color:#D34B62;
        background: #F6F6F6;
        white-space: pre-wrap;
        border-radius: 2px;
        display: inline;
    }

    pre {
        font-size: 15px;
        line-height: 1.4em;
        display: block !important;
    }

    pre code {
        white-space: pre;
        overflow: auto;
        border-radius: 3px;
        padding: 1px 1px;
        display: block !important;
    }

    strong,
    b {
        color: #BF360C;
    }

    em,
    i {
        color: #009688;
    }

    hr {
        border: 1px solid #BF360C;
        margin: 1.5em auto;
    }

    p {
        margin: 1.5em 5px !important;
    }

    table,
    pre,
    dl,
    blockquote,
    q,
    ul,
    ol {
        margin: 10px 5px;
    }

    ul,
    ol {
        padding-left: 15px;
    }

    li {
        margin: 10px;
    }

    li p {
        margin: 10px 0 !important;
    }

    ul ul,
    ul ol,
    ol ul,
    ol ol {
        margin: 0;
        padding-left: 10px;
    }

    ul {
        list-style-type: circle;
    }

    dl {
        padding: 0;
    }

    dl dt {
        font-size: 1em;
        font-weight: bold;
        font-style: italic;
    }

    dl dd {
        margin: 0 0 10px;
        padding: 0 10px;
    }

    blockquote,
    q {
        border-left: 2px solid #009688;
        padding: 0 10px;
        color: #777;
        quotes: none;
        margin-left: 1em;
    }

    blockquote::before,
    blockquote::after,
    q::before,
    q::after {
        content: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 20px 0 10px;
        padding: 0;
        color: #009688 !important;
        text-align: center !important;
        margin: 1.5em 5px !important;
        padding: 0.5em 1em !important;
    }

    #parent {
        float: left;
        width: 100%;
    }
    
    #left {
        float: left;
        width: 50%;
        min-width: 600px;
    }

    #right {
        float: right;
        width: 50%;
        min-width: 600px;
    }

    #oriContent {
        height: 600px;
        width: 600px;
    }

    .tool {
        -webkit-user-select: none;
        user-select: none;
        padding: 0px 25px;
        font-size: 25px;
        color: lightsteelblue;
    }

    .tool:hover {
        color: aquamarine;
    }
    </style>
</head>

<body>

<div id="parent">
    <div>
        <strong class="tool" onclick="untils('b')">B</strong>
        <i class="tool" onclick="untils('i')">I</i>
        <del class="tool" onclick="untils('s')">S</del>
        <strong><i class="tool" onclick="untils('bi')">BI</i></strong>
        <u class="tool" onclick="untils('u')">U</u>
        <span class="tool" onclick="untils('h1')">H1</span>
        <span class="tool" onclick="untils('h2')">H2</span>
        <span class="tool" onclick="untils('h3')">H3</span>
        <span class="tool" onclick="untils('--')">--</span>
        <span class="tool" onclick="untils('ol')">OL</span>
        <span class="tool" onclick="untils('ul')">UL</span>
    </div>
    <div id="left"><textarea id="oriContent" onkeyup="convert()"></textarea></div>
    <div id="right"><div id="result"></div></div>
</div>

<script>
    var addressUri;
    var rendererMD = new marked.Renderer();
    marked.setOptions({
        renderer: rendererMD,
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false
    });
    window.onload = function () {
        let request = new XMLHttpRequest();
        request.open("get", "assets.json");
        request.send(null);
        request.onload = function () {
            if (request.status == 200) {
                let json = JSON.parse(request.responseText);
                addressUri = json.serverUri;
            } else {
                console.log("读取服务器地址失败-请手动配置addressUri");
            }
            sendData(null, true);
        }
    }
    function convert() {
        var text = document.getElementById("oriContent").value;
        document.getElementById("result").innerHTML = marked(text);
        sendData(text, false);
    }
    function untils(choice) {
        var text = document.getElementById("oriContent");
        if (window.getSelection) {
            if (text.selectionStart != undefined && text.selectionEnd != undefined) {
                let changeMap = {
                    "i": ["*", "*", true],
                    "b": ["**", "**", true],
                    "bi": ["***", "***", true],
                    "u": ["<u>", "</u>", true],
                    "s": ["~~", "~~", true],
                    "h1": ["# ", "", false],
                    "h2": ["## ", "", false],
                    "h3": ["### ", "", false],
                    "--": ["", "\n------------\n", false],
                    "ol": ["1. ", "", false],
                    "ul": ["- ", "" , false]
                }
                if ((text.selectionEnd == 0 || text.selectionStart >= text.selectionEnd) && changeMap[choice][2]) {
                    alert("未选中文字");
                } else {
                    text.value = text.value.slice(0, text.selectionStart) + changeMap[choice][0] +
                        text.value.slice(text.selectionStart, text.selectionEnd) + changeMap[choice][1] + text.value.slice(text.selectionEnd);
                    convert();
                }
            }
        }
    }
    function sendData (myText, reset) {
        let ajaxObj = new XMLHttpRequest();
        if (myText) {
            myText = myText.replace(/(\r\n|\n|\r)/gm, "<br/>");
            ajaxObj.open('get', addressUri + '?data=' + encodeURI(myText));
        } else {
            ajaxObj.open('get', addressUri);
        }
        ajaxObj.send();
        ajaxObj.onreadystatechange = function () {
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200 && reset) {
                let ret = decodeURI(ajaxObj.responseText);
                document.getElementById("oriContent").value = ret.replaceAll("<br/>", "\n");
                convert();
            }
        }
    }
</script>

</body>
</html>